<template>
  <button :class="['btn', 'btn-' + type, 'btn-' + size]" @click="onClick">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: "MyButton",
  props: {
    type: {
      default: "", // 默认值，如果父组件没有传type，则type为''
      validator(value) {
        // 只能传数组中的值，否则控制台抛出警告
        return ["", "primary", "success", "danger", "warning"].includes(value);
      }
    },
    size: {
      default: "",
      validator(value) {
        // 只能传数组中的值，否则控制台抛出警告
        return ["", "medium", "small", "mini"].includes(value);
      }
    }
  },
  methods: {
    onClick() {
      console.log("这是子组件的回调方法");

      this.$emit("click", "abc");
    }
  }
};
</script>

<style scoped>
.btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  padding: 12px 23px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 5px;
}
.btn-primary {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
.btn-success {
  background: #67c23a;
  border-color: #67c23a;
  color: #fff;
}
.btn-danger {
  background: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}
.btn-warning {
  background: #e6a23c;
  border-color: #e6a23c;
  color: #fff;
}

.btn-medium {
  padding: 10px 20px;
}
.btn-small {
  padding: 9px 15px;
}
.btn-mini {
  padding: 7px 15px;
}
</style>